<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- CSRF Token -->
  <meta name="csrf-token" content="{{ csrf_token() }}">

  <title>@yield('title') {{ config('app.name', '') }}</title>
  
  <link href="{{ URL::asset('css/app.css') }}" rel="stylesheet">

  @yield('css')
  <style>
    [v-cloak] {
      display: none;
    }
    #layout-app{
      background: #f5f7f9;
      position: relative;
      border-radius: 4px;
      overflow: hidden;
    }
    #layout-app .layout {
      height: 100%;
      position: fixed;
      width: 100%;
      overflow: hidden;
    }
    .layout-header-bar{
      background: #1D1E23;
      box-shadow: 0 1px 1px rgba(0,0,0,.1);
      height: 60px;
      line-height: 60px;
    }
    .layout-logo-left{
      width: 90%;
      height: 30px;
      background: #5b6270;
      border-radius: 3px;
      margin: 15px auto;
    }
    .menu-icon{
      transition: all .3s;
      cursor: pointer;
      float: left;
      line-height: 60px;
      color: #f6ca9d;
    }
    .rotate-icon{
      transform: rotate(-90deg);
    }
    .menu-sider {
      background-color: #1D1E23;
    }
    .menu-sider .logo {
      height: 60px;
      background-color: #1D1E23;
    }
    .menu-item {
      background-color: #1D1E23;
    }
    .menu-item span{
      display: inline-block;
      overflow: hidden;
      width: 69px;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: bottom;
      transition: width .2s ease .2s;
    }
    .menu-item i{
      transform: translateX(0px);
      transition: font-size .2s ease, transform .2s ease;
      vertical-align: middle;
      font-size: 16px;
    }
    .collapsed-menu span{
      width: 0px;
      transition: width .2s ease;
    }
    .collapsed-menu .ivu-menu {
      display: none;
    }
    .collapsed-menu .ivu-icon {
      font-size: 0;
      transition: width .2s ease;
    }
    .collapsed-menu i{
      transform: translateX(5px);
      transition: font-size .2s ease .2s, transform .2s ease .2s;
      vertical-align: middle;
      font-size: 22px;
    }
    .header-nav {
      float: left;
      background-color: #1D1E23;
    }
    .header-right-nav {
      float: right;
      background-color: #1D1E23;
    }
    .header-nav .ivu-menu-item {
      border-bottom: 2px solid #1D1E23 !important;
      color: #B39B7F !important;
    }
    .header-nav .ivu-menu-item-active, .header-nav .ivu-menu-item:hover {
      border-bottom: 2px solid #f6ca9d !important;
      color: #f6ca9d !important;
    }

    .header-right-nav .ivu-menu-submenu, .header-right-nav .menu-item-right {
      border-bottom: 2px solid #1D1E23 !important;
      color: #B39B7F !important;
    }
    .header-right-nav .ivu-menu-submenu-active, .header-right-nav .ivu-menu-submenu:hover, .header-right-nav .menu-item-right:hover {
      color: #f6ca9d !important;
      border-bottom: 2px solid #48484A !important;
      background-color: #48484A;
    }
  </style>
</head>
<body>
<div id="layout-app" v-cloak>
  <Layout class="layout">
    <Sider ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed" class="menu-sider">
      <div class="logo">
        {{-- <img src="https://smart-community-goke.oss-cn-beijing.aliyuncs.com/202005271902267979.png"> --}}
      </div>

      @include('widget.menu', ['menus' => App\Support\Helper::getMenu()])
    </Sider>

    <Layout>
        <Header :style="{padding: 0}" class="layout-header-bar">
          <Icon @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '0 20px'}" type="md-menu" size="24"></Icon>
          <i-menu mode="horizontal" class="header-nav">
            <Menu-Item name="1">
              <i class="iconfont icon-gouwujianying"></i>
              内容管理
            </Menu-Item>
            <Menu-Item name="2">
              <i class="iconfont icon-UserService"></i>
              用户管理
            </Menu-Item>
          </i-menu>

          <i-menu mode="horizontal" class="header-right-nav">
            <Menu-Item name="1" class="menu-item-right">
              <i class="iconfont icon-lingdang1"></i>
            </Menu-Item>
            <Submenu name="3">
              <template slot="title">
                <i class="iconfont icon-set"></i>
                Gurudin
              </template>
              <Menu-Group title="使用">
                  <Menu-Item name="3-1">新增和启动</Menu-Item>
                  <Menu-Item name="3-2">活跃分析</Menu-Item>
                  <Menu-Item name="3-3">时段分析</Menu-Item>
              </Menu-Group>
              <Menu-Group title="留存">
                  <Menu-Item name="3-4">用户留存</Menu-Item>
                  <Menu-Item name="3-5">流失用户</Menu-Item>
              </Menu-Group>
            </Submenu>
          </i-menu>
        </Header>
        <Content :style="{margin: '20px', background: '#fff', minHeight: '260px'}">
          Content
        </Content>
    </Layout>
  </Layout>
</div>
  
<script src="{{ URL::asset('js/app.js') }}"></script> 
@yield('script')
  
<script>
  const vm = new Vue({
    el: "#layout-app",
    data () {
      return {
        isCollapsed: false
      }
    },
    computed: {
      rotateIcon () {
        return [
          'menu-icon',
          this.isCollapsed ? 'rotate-icon' : ''
        ];
      },
      menuitemClasses () {
        return [
          'menu-item',
          this.isCollapsed ? 'collapsed-menu' : ''
        ]
      }
    },
      methods: {
        collapsedSider () {
          this.$refs.side1.toggleCollapse();
        }
      }
  });
</script>
</body>
</html>